<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .one{
    height: 90px;
    width: 1535px;
    background-color: #0eb189;
    margin: auto;
}
.bbb img{
    margin-left:140px;
}
li{
    list-style: none;
}
.aaa img{
    width: 1535px;
}
 a{
    text-decoration: none;
    color:#fff ; 
    display: inline-block;
    text-decoration: none;
    height: 90px;
}
.abc{
    float:left;
    margin-left: 300px;
    margin-top: -60px;
    height: 41px;
}
.abc ul li{
    float: left;
    margin: 0 15px;
    display: block;
    height: 42px;
    padding: 0 10px;
    line-height: 60px;
    
}
.two{
    float:right;
    margin-right: 100px;
    margin-top: -60px;
}
.two ul li{
    float:right;
    margin: 0 15px;
    display: block;
    height: 42px;
    padding: 0 10px;
    line-height: 60px; 
}
.bba a:hover{
    background-color: grey;
}
.czn img:hover{
    box-shadow:  6px 6px 6px 6px gray;
}
.cz img:hover{
    box-shadow:  6px 6px 6px 6px gray;
}
.czn img{
    display: inline-block; 
    width: 200px;
    height: 180px;
    margin:0 auto;
    text-align: center;
    
    margin-left: 20px; 
    
}
.cz img{
    display: inline-block; 
    width: 200px;
    height: 180px;
    margin:0 auto;
   margin-top: 20px;
    margin-left: 20px;   
}
.bba{
    text-align: center;
    margin-top: 50px;
}
.ooo{
    color: #3688e7;
    margin-top: 50px;
    margin-left: 250px;
}
.ooo input{
    border-bottom-left-radius: 15px;
        border-top-left-radius: 15px; 
        border-bottom-right-radius: 15px;
        border-top-right-radius: 15px; 
        height: 30px;
        width: 250px;
        margin-left: 350px;
        color: gray;
}
.jjj{
    height: 30px;
        width: 50px;
        margin-left: 0px;
        background-color: #3688e7;
        border: #3688e7;
}
.hhh{
    height: 30px;
        width: 50px;
        margin-left: 0px;
        background-color: #fff;
}
.ggg{
    height: 30px;
        width: 50px;
        margin-left:0px;
        
}
.fff{
    float: right;
    margin-top: 30px;
    margin-right: 200px;
}
.rrr{
    height: 50px;
    width: 1535px;
    background-color:black;
    margin-top:100px;
}

    </style>
</head>
<body>
    <div class="one">
        <div class="bbb">
        <img src="1.png" alt="">
    </div>
        <div class="abc">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程中心</a></li>
                <li><a href="#">教师中心</a></li>
                <li><a href="#">机构中心</a></li>
            </ul>
        </div>
        <div class="two">
             <ul>
                 <li><a href="#">登录</a></li>
                 
                 <li><a href="客户端.html">客户端</a></li>
             </ul>
        </div>
        </div>
    </div>
    <div class="ooo">
        <span>全部课程</span1>
        <span>（共476门课程）</span>
        <input type="text" value="输入要搜索的课程名称" class="gray">
        <button class="ggg">搜索</button>
        <button class="jjj">最新</button>
        <button class="hhh">最热</button>
    </div>
<div class="bba">
    <div class="czn">
        <img src="q.png">
        <img src="w.png">
        <img src="e.png">
        <img src="r.png">
        <img src="r.png">
    </div>
       <div class="cz"> 
        <img src="y.png">
        <img src="u.png">
        <img src="i.png">
        <img src="t.png">
        <img src="r.png">
    </div>
    </div>
</div>
<div class="fff">
    <button>下一页</button>
    <button>&nbsp;1&nbsp;</button>
    <button>&nbsp;2&nbsp;</button>
    <button>&nbsp;3&nbsp;</button>
    <span>...</span>
    <button>&nbsp;23&nbsp;</button>
    <button>&nbsp;24&nbsp;</button>
    <button>下一页</button>
</div>
<div class="rrr">
</div>
</body>
</html>